import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import $ from 'jquery'
import AccountBanner from '../../widgets/Banner/AccountBanner'
import JoinForm from '../../widgets/Form/JoinForm'
import LoginForm from '../../widgets/Form/LoginForm'
import ForgetForm from '../../widgets/Form/ForgetForm'

export default function Account(props: any) {
    const [containerWidth, setContentWidth] = useState<any>()

    useEffect(() => {
        const login = $(`.${style.login}`)
        const join = $(`.${style.join}`)
        const forget = $(`.${style.forget}`)
        switch (props.params.accountType) {
            case 'login':
                login.addClass('in')
                join.addClass('out')
                join.removeClass('in')
                forget.addClass('out')
                forget.removeClass('in')
                setTimeout(() => {
                    join.removeClass('out')
                    forget.removeClass('out')
                }, 1000)
                break
            case 'join':
                join.addClass('in')
                login.addClass('out')
                login.removeClass('in')
                forget.addClass('out')
                forget.removeClass('in')
                setTimeout(() => {
                    login.removeClass('out')
                    forget.removeClass('out')
                }, 1000)
                break
            case 'forget':
                forget.addClass('in')
                login.addClass('out')
                login.removeClass('in')
                join.addClass('out')
                join.removeClass('in')
                setTimeout(() => {
                    login.removeClass('out')
                    join.removeClass('out')
                }, 1000)
                break
        }
    }, [props.params.accountType])

    return (
        <div className={style.container}>
            <AccountBanner />
            <div className={style.content}>
                <div className={style.login}>
                    <LoginForm />
                </div>
                <div className={style.join}>
                    <JoinForm />
                </div>
                <div className={style.forget}>
                    <ForgetForm />
                </div>
            </div>
        </div>
    )
}
